<template>
    <view>
        <view class="enterprise" :style="'background-image: url(' +bgImage.imageUrl+ ')'">
            <view class="goodsbox">
                <view class="goodsbox_tab">
                    <view @click="changeTab(index,true)" :class="{tab_item:true,tab_active:tabindex == index}" v-for="(item,index) in tab" :key="index">{{item.name}}</view>
                </view>
                <view class="goodsbox_list">
                    <view class="list_item" v-for="(item,index) in goodsList" :key="index" @click="jump(item.sku_id)" v-if="index<4">
                        <image :src="item.sku_image"></image>
                        <view class="item_title">{{item.goods_name}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
	data() {
		return {
			tab: [],
			tabindex: 0,
			goodsList: [],
			time: null,
			timeOut: null
		}
	},
	props: {
		value: {
			type: Object
		},
		bgImage: {
			type: Object
		}
	},
	beforeDestroy() {
		console.log('-----beforeDestroy------')
		clearInterval(this.time)
		clearTimeout(this.timeOut)
	},
	mounted() {
		this.getShop()
		this.timOut()
	},
	methods: {
		changeTab(index, isLoop) {
			if (isLoop) {
				clearInterval(this.time)
				clearTimeout(this.timeOut)
				this.timeOut = setTimeout(() => {
					this.timOut()
				}, 6000)
			}
			this.tabindex = index
			this.goodsIndexshop()
		},
		getShop() {
			this.$request.goodsIndexClass().then(res => {
				if (res.code >= 0) {
					this.tab = res.data
					this.goodsIndexshop()
				}
			})
		},
		goodsIndexshop() {
			this.$request.goodsIndexshop({
				lable_id: this.tab[this.tabindex].id
			}).then(res => {
				if (res.code >= 0) {
					this.goodsList = res.data.list
				}
			})
		},
		timOut() {

			this.time = setInterval(() => {
				let currentPage = getCurrentPages()[getCurrentPages().length - 1]
				let currentRoute = currentPage.route
				if (currentRoute == 'pages/index/index/index') {
					var num = this.tab.length - 1
					var tabindex = ++this.tabindex
					if (tabindex > num) {
						tabindex = 0
					}
					this.changeTab(tabindex)
				}
			}, 5000)
		},
		jump(skuId) {
			this.$util.redirectTo('/pages/goods/detail/detail', {
				sku_id: skuId
			})
		}
	}
}
</script>

<style scoped lang="scss">
.enterprise {
    width: 690rpx;
    height: 520rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;

    .goodsbox {
        position: absolute;
        bottom: 16rpx;
        left: 14rpx;
        width: 662rpx;
        height: 336rpx;
        background-color: #ffffff;
        padding: 0 32rpx;
        border-radius: 10rpx;

        &_tab {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 22rpx;

            .tab_item {
                width: 154rpx;
                height: 64rpx;
                text-align: center;
                line-height: 64rpx;
                color: #222222;
                font-size: 28rpx;
            }

            .tab_active {
                background-image: url("https://xmgts.kanfoshan.cn/public/static/images/tabactive.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
        }

        &_list {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 26rpx;

            .list_item {
                text-align: center;

                image {
                    width: 116rpx;
                    height: 116rpx;
                    border-radius: 8rpx;
                }

                .item_title {
                    width: 118rpx;
                    color: #222222;
                    font-size: 20rpx;
                    font-weight: 500;
                    text-overflow: -o-ellipsis-lastline;
                    line-height: 36rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}
</style>
